<!DOCTYPE html>

<!-- Copyright © SixtyFPS GmbH <info@slint-ui.com> -->
<!-- SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial -->

<html>
<!--
    This is a static html file used to display the wasm build.
    In order to generate the build
     - uncomment the #wasm# lines in Cargo.toml
     - Run in this directory:
         SLINT_STYLE=fluent wasm-pack build --release --out-dir pkg/fluent --target web
         SLINT_STYLE=material wasm-pack build --release --out-dir pkg/material --target web
  -->

<head>
  <meta charset="UTF-8">
  <title>Slint Widget Gallery Demo (Web Assembly version)</title>
  <link rel="stylesheet" href="https://slint-ui.com/css/demos-v1.css">
</head>

<body>
  <h1>Slint Gallery</h1>
  <p>This is the <a href="https://slint-ui.com">Slint</a> UI Widget Gallery Demo compiled to WebAssembly. It
    demonstrates
    different re-usable graphical
    elements.</p>

  <div id="spinner" style="position: relative;">
    <div class="spinner">Loading...</div>
  </div>
  <p>Select style
    <select id="style-selection">
      <option value="">fluent</option>
      <option value="">material</option>
    </select>
  </p>
  <div id="canvas-parent" width="640" height="480"></div>
  <p class="links">
    <a href="https://github.com/slint-ui/slint/blob/master/examples/gallery/gallery.slint">
      View Source Code on GitHub</a> -
    <a href="https://slint-ui.com/editor?load_demo=examples/gallery/gallery.slint">
      Open in SlintPad
    </a>
  </p>
  <script type="module">
    const fluent = "./pkg/fluent/gallery.js";
    const material = "./pkg/material/gallery.js";

    function initGallery(gallery) {
      document.getElementById("spinner").hidden = false;

      let canvas = document.getElementById("canvas");

      // remove old canvas and unload window
      if (canvas != undefined) {
        canvas.remove();
      }

      import(gallery).then(module => {
        let canvas = document.createElement("canvas");
        canvas.id = "canvas";

        document.getElementById("canvas-parent").appendChild(canvas);
        module.default().finally(() => {
          document.getElementById("canvas").hidden = false;
          document.getElementById("spinner").hidden = true;
        });
      })
    }

    initGallery(fluent);

    var styleSelection = document.getElementById("style-selection");
    styleSelection.onchange = function (ev) {
      var selectedStyle = styleSelection[styleSelection.selectedIndex].innerText;

      switch (selectedStyle) {
        case "fluent":
          initGallery(fluent);
          break;
        case "material":
          initGallery(material);
          break;
        default:
          break;
      }
    };
  </script>
</body>

</html>
